@extends('home.parent')
@section('title','我的客户列表')
@section('head_js')
@endsection
@section('head_css')
    <link rel="stylesheet" href="{{ asset('/css/dataTables.bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/select2/select2.min.css') }}">
    <style type="text/css">
        .select2-container .select2-selection--single{
            height:34px;
            line-height: 34px;
            border: 1px solid #D2D6DE;
            border-radius: 1px;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <div class="form-inline pull-left">
                                <fieldset>
                                    <div class="input-group input-group-sm" >
                                        <span class="input-group-addon"><strong>编号</strong></span>
                                        <input type="text" style="width: 100px;" class="form-control" id="search_user_id">
                                    </div>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-addon"><strong>用户类型</strong></span>
                                        <select class="form-control select2" style="width: 120px;" id="search_user_type">
                                            <option value="-1">用户类型</option>
                                            <option value="0">普通用户</option>
                                            <option value="1">会员</option>
                                            <option value="2">分享嘉宾</option>
                                        </select>
                                    </div>
                                    <div class="input-group input-group-sm" >
                                        <span class="input-group-addon"><strong>昵称</strong></span>
                                        <input type="text" style="width: 100px;" class="form-control" id="search_nick_name">
                                    </div>
                                    <div class="input-group input-group-sm" >
                                        <span class="input-group-addon"><strong>姓名</strong></span>
                                        <input type="text" style="width: 100px;" class="form-control" id="search_real_name">
                                    </div>
                                    <div class="input-group input-group-sm" >
                                        <span class="input-group-addon"><strong>手机号</strong></span>
                                        <input type="text" style="width: 100px;" class="form-control" id="search_mobile">
                                    </div>
                                    <div class="input-group input-group-sm" style="margin-left: 30px; padding-top: 20px;">
                                        <div class="input-group-btn" >
                                            <button type="button"  style="height: 35px;width: 35px;" class="btn btn-primary" onclick="searchData()"><i class="fa fa-search"></i></button>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="input-group input-group-sm">
                                        <select class="form-control select2" style="width: 150px;" id="search_user_country">
                                            <option value="0">选择地区</option>
                                            @if(!empty($area_list))
                                                @foreach($area_list as $val)
                                                    <option class="country" value="{{ $val['id'] }}">{{ $val['name'] }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="input-group input-group-sm">
                                        <select class="form-control select2" style="width: 150px;" id="search_user_province">
                                            <option value="0">选择省/州</option>
                                        </select>
                                    </div>
                                    <div class="input-group input-group-sm">
                                        <select class="form-control select2" style="width: 150px;" id="search_user_city">
                                            <option >选择城市</option>
                                        </select>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="data_list" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>头像</th>
                                    <th>用户类型</th>
                                    <th>昵称</th>
                                    <th>真实姓名</th>
                                    <th>销售</th>
                                    <th>客服</th>
                                    <th>手机号码</th>
                                    <th>会员到期时间</th>
                                    <th>付费用户</th>
                                    <th>服务记录</th>
                                    <th>机构信息</th>
                                    <th>完善用户</th>
                                    <th>最近服务</th>
                                    <th>操作</th>
                                    <th>用户信息</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th>编号</th>
                                    <th>头像</th>
                                    <th>用户类型</th>
                                    <th>昵称</th>
                                    <th>真实姓名</th>
                                    <th>销售</th>
                                    <th>客服</th>
                                    <th>手机号码</th>
                                    <th>会员到期时间</th>
                                    <th>付费用户</th>
                                    <th>服务记录</th>
                                    <th>机构信息</th>
                                    <th>完善用户</th>
                                    <th>最近服务</th>
                                    <th>操作</th>
                                    <th>用户信息</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="modal fade in" id="modal-info">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户详情</h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tbody>
                        <tr>
                            <th>唯一标识</th>
                            <td id="view_token"></td>
                        </tr>
                        <tr>
                            <th>用户类型</th>
                            <td id="view_user_type"></td>
                        </tr>
                        <tr>
                            <th>头像</th>
                            <td><img src="" id="view_head_img" class="icon_img_css"/></td>
                        </tr>
                        <tr>
                            <th>昵称</th>
                            <td id="view_nick_name"></td>
                        </tr>
                        <tr>
                            <th>真实姓名</th>
                            <td id="view_real_name"></td>
                        </tr>
                        <tr>
                            <th>手机号</th>
                            <td id="view_mobile"></td>
                        </tr>
                        <tr>
                            <th>公司</th>
                            <td id="view_company"></td>
                        </tr>
                        <tr>
                            <th>职位</th>
                            <td id="view_profession"></td>
                        </tr>
                        <tr>
                            <th>地区</th>
                            <td id="view_area"></td>
                        </tr>
                        <tr>
                            <th>性别</th>
                            <td id="view_sex"></td>
                        </tr>
                        <tr>
                            <th>生日</th>
                            <td id="view_birthday"></td>
                        </tr>
                        <tr>
                            <th>创建时间</th>
                            <td id="view_create_time"></td>
                        </tr>
                        <tr>
                            <th>会员到期时间</th>
                            <td id="view_deadline_time"></td>
                        </tr>
                        <tr>
                            <th>身份证号</th>
                            <td id="view_ID_card"></td>
                        </tr>
                        <tr>
                            <th>关注时间</th>
                            <td id="view_subscribe_time"></td>
                        </tr>
                        <tr>
                            <th>关注渠道来源</th>
                            <td id="view_subscribe_scene"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('foot_js')
    <script src="{{ asset('/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script>
    <script src="{{ asset('/js/fastclick.js') }}"></script>
    <script src="{{ asset('/js/tools.js').'?v='.env('VERSION') }}"></script>
    <script src="{{ asset('/css/select2/select2.full.min.js') }}"></script>
    <script>
      var list_ajax;
      $(function () {
        $(".select2").select2();
        //提示信息
        var lang = puppet.langShow();
        //初始化表格
        list_ajax = $("#data_list").dataTable({
          language:lang,  //提示信息
          autoWidth: false,  //禁用自动调整列宽
          stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
          processing: true,  //隐藏加载提示,自行处理
          serverSide: true,  //启用服务器端分页
          searching: false,  //禁用原生搜索
          orderMulti: false,  //启用多列排序
          order: [[0,'desc'],[8,'desc']],  //取消默认排序查询,否则复选框一列会出现小箭头
          renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
          pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
          columnDefs: [
            {
              "targets": [1,2,3,4,5,6,7,9,10,11,12,13,14],  //列的样式名
              "orderable": false    //包含上样式名‘nosort’的禁止排序
            },
            {
              targets: 1,
              data: "img",
              title: "头像",
              render: function (data, type, row, meta) {
                return "<img src='"+data+"' class='icon_img_css' />";
              }
            },
            {
              targets: 2,
              data: "user_type",
              title: "用户类型",
              render: function (data, type, row, meta) {
                var user_type = '';
                switch(data){
                  case 0:
                    user_type = '普通用户';
                    break;
                  case 1:
                    user_type = '会员';
                    break;
                  case 2:
                    user_type = '分享嘉宾';
                    break;
                }
                return user_type;
              }
            },
            {
              targets: 8,
              data: "deadline_time",
              title: "会员到期时间",
              render: function (data, type, row, meta) {
                return (data > 0) ? puppet.formatDateTime(data*1000) : '';
              }
            },
            {
              targets: 9,
              data: "is_pay",
              title: "付费用户",
              render: function (data, type, row, meta) {
                return (data == 1) ? '是' : '否';
              }
            },
            {
              targets: 14,
              title: "操作",
              render:function(data,type,row,meta){
                return  "&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:;' title='查看' aria-label='View' data-pjax='0' onclick='showModal("+row.user_id+")'><span class='glyphicon glyphicon-eye-open'></span></a>";
              }
            },
            {
              targets: 15,
              title: "用户信息",
              render:function(data,type,row,meta){
                return  "&nbsp;&nbsp;&nbsp;&nbsp;<a href='{{ URL('admin/my/service/view/')}}/"+row.user_id+"' target='_blank'>用户信息</a>";
              }
            },
          ],
          ajax: function (data, callback, settings) {
            //封装请求参数
            var param = {};
            param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.start = data.start;//开始的记录序号
            param.page = (data.start / data.length)+1;//当前页码
            param.order = data.order;
            param.search = data.search;
            param.admin_id = {{ $admin_id }};
            param.user_id = $.trim($('#search_user_id').val());
            param.user_type = $('#search_user_type').val();
            param.nick_name = $.trim($('#search_nick_name').val());
            param.real_name = $.trim($('#search_real_name').val());
            param.mobile = $.trim($('#search_mobile').val());
            var country_name = $('#search_user_country').find("option:selected").text();
            var province_name = $('#search_user_province').find("option:selected").text();
            var city_name = $('#search_user_city').find("option:selected").text();
            param.country_name = country_name=='选择地区'?'':country_name;
            param.province_name = province_name=='选择省/州'?'':province_name;
            param.city_name = city_name=='选择城市'?'':city_name;
            param.ispay = $.trim($('#search_ispay').val());
            $.ajax({
              type: "POST",
              url: '{{ URL('admin/service/relation/list/ajax') }}',
              cache: false,  //禁用缓存
              data: param,   //传入组装的参数
              dataType: "json",
              success: function (result) {
                var returnData = {};
                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                returnData.recordsTotal = result.total;//返回数据全部记录
                returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                returnData.data = result.data;//返回的数据列表
                callback(returnData);
              }
            });
          },
          //列表表头字段
          columns: [
            {"data":"user_id"},
            {"data":"head_img"},
            {"data":"user_type"},
            {"data":"nick_name"},
            {"data":"real_name"},
            {"data":"sale_name"},
            {"data":"service_name"},
            {"data":"mobile"},
            {"data":"deadline_time"},
            {"data":"is_pay"},
            {"data":"count_remark"},
            {"data":"company_percentage"},
            {"data":"userinfo_percentage"},
            {"data":"str_time"},
            {"data":null},
          ],
          "fnDrawCallback":function(){
            $("#data_list_paginate").children('ul').append("<li style='margin-left:5px;'>&nbsp;&nbsp;<label style='margin-top:-5px;'>到第</lable>&nbsp;<input style='width:40px;hidden:none' class='margin text-center' id='changePage' type='text'>&nbsp;&nbsp;<label>页</lable>&nbsp;</li> <li style='margin-left:5px;float:right;' class='paginate_button'><a style='margin-bottom:5px' href='javascript:void(0);'id='dataTable-btn'>确认</a></li>");
            var oTable = $("#data_list").dataTable();
            $('#dataTable-btn').click(function(e){
              if($("#changePage").val() && $("#changePage").val() > 0) {
                var redirectpage = $("#changePage").val() - 1;
              }else{
                var redirectpage = 0;
              }
              oTable.fnPageChange(redirectpage);
            });
          },
        }).api();
      });
      function searchData(){
        $("#data_list").dataTable().fnDraw(false);
      }
      function showModal(id){
        var url = "{{ URL('admin/user/info') }}";
        var data = {id:id};
        var result = puppet.myajax('post',url,data,false);
        if(result.code == 1){
          alert(result.msg);
          return false;
        }else{
          $('#view_token').html(result.data.token);
          switch(result.data.user_type){
            case 0:
              user_type= '普通用户';
              break;
            case 1:
              user_type= '会员';
              break;
            case 2:
              user_type= '分享嘉宾';
              break;
          }
          $('#view_user_type').html(user_type);
          $('#view_nick_name').html(result.data.nick_name);
          $('#view_real_name').html(result.data.real_name);
          var sex = '';
          switch(result.data.sex){
            case 1:
              sex = '男';
              break;
            case 0:
              sex = '女';
              break;
            case 2:
              sex = '未知';
              break;
            default:
              sex = '未知';
              break;
          }
          $('#view_sex').html(sex);
          $('#view_mobile').html(result.data.mobile);
          $('#view_birthday').html(result.data.birthday);
          $('#view_profession').html(result.data.profession);
          $('#view_create_time').html(result.data.create_time);
          $('#view_deadline_time').html(result.data.deadline_time);
          $('#view_company').html(result.data.company);
          $('#view_ID_card').html(result.data.ID_card);
          $('#view_head_img').attr("src",result.data.head_img);
          $('#view_subscribe_time').html(result.data.subscribe_time);
          $('#view_subscribe_scene').html(result.data.subscribe_scene);
          $('#view_area').html(result.data.country + '&nbsp;&nbsp;' +result.data.province + '&nbsp;&nbsp;' +result.data.city);
          $('#modal-info').modal();
        }
      }
      //根据国家id获取省信息
      $("#search_user_country").change(function(){
        var country_id = $(this).val();
        if(country_id == 0){
          $("#search_user_province option[class='province']").remove();
          $("#search_user_city option[class='city']").remove();
          return;
        }
        var url = "{{URL('admin/user/province/list/ajax')}}";
        var data = {country_id:country_id};
        var result = puppet.myajax('post',url,data,false);
        if(result.code == 1){
          puppet.mesFailure(result.msg);
          return false;
        }else{
          $("#search_user_province option[class='province']").remove();
          if(result !=''){
            var html = '';
            $.each(result,function(key,val){
              html += '<option class="province" value='+val.id+'>'+val.name+'</option>';
            });
            $(html).appendTo($("#search_user_province"));
          }
        }
      });
      //根据省id获取市信息
      $("#search_user_province").change(function(){
        var province_id = $(this).val();
        if(province_id == 0){
          $("#search_user_city option[class='city']").remove();
          return;
        }
        var url = "{{URL('admin/user/city/list/ajax')}}";
        var data = {province_id:province_id};
        var result = puppet.myajax('post',url,data,false);
        if(result.code == 1){
          puppet.mesFailure(result.msg);
          return false;
        }else{
          $("#search_user_city option[class='city']").remove();
          if(result !=''){
            var html = '';
            $.each(result,function(key,val){
              html += '<option class="city" value='+val.id+'>'+val.name+'</option>';
            });
            $(html).appendTo($("#search_user_city"));
          }
        }
      });
    </script>
@endsection